<template>
    <div class="success-page">
        <div class="success-content">
            <!-- 加载状态 -->
            <div v-if="loading" class="loading-state">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div v-else-if="error" class="error-state">
                <div class="error-icon">❌</div>
                <h2>{{ error }}</h2>
                <p>即将返回首页...</p>
            </div>

            <!-- 成功状态 -->
            <template v-else>
                <div class="success-icon">
                    <svg viewBox="0 0 24 24" class="checkmark">
                        <path 
                            fill="none" 
                            stroke="currentColor" 
                            stroke-width="2" 
                            d="M4 12l5 5L20 7"
                        />
                    </svg>
                </div>

                <h1 class="success-title">发布成功！</h1>
                <p class="success-message">您的文章已经成功发布</p>

                <!-- 文章信息卡片 -->
                <div class="article-card">
                    <h3 class="article-title">{{ article?.title }}</h3>
                    <div class="article-meta">
                        <span>{{ formatDate(article?.created_at) }}</span>
                        <span v-if="article?.category">{{ article?.category.name }}</span>
                        <span>{{ article?.tags.join(', ') }}</span>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <router-link 
                        :to="`/article?id=${article?.id}`" 
                        class="btn view-btn"
                    >
                        查看文章
                    </router-link>
                    <router-link 
                        to="/dashboard" 
                        class="btn home-btn"
                    >
                        返回首页
                    </router-link>
                    <router-link 
                        to="/create" 
                        class="btn create-btn"
                    >
                        继续创作
                    </router-link>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formatDate } from '@/utils/date'
import { articleApi } from '@/api/article' // 假设你有一个文章API模块


const route = useRoute()
const router = useRouter()
const article = ref()
const loading = ref(true)
const error = ref('')
const timer = ref(0)
// 获取文章数据
const fetchArticle = async () => {
    try {
        loading.value = true
        const articleId = route.query.id
        if (!articleId) {
            throw new Error('文章ID不存在')
        }

        // 使用API获取文章数据
        const data = await articleApi.getArticleById(Number(articleId))
        article.value = data

    } catch (err: any) {
        console.error('Error fetching article:', err)
        error.value = err.message || '获取文章信息失败'
        // 如果获取失败，3秒后跳转到首页
        timer.value = setTimeout(() => {
            router.push('/')
        }, 3000)
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    fetchArticle()
})
onUnmounted(()=>{
    clearTimeout(timer.value)
})
</script>

<style lang="less" scoped>
.success-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: #f8f9fa;
}

.success-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    animation: scale-up 0.3s ease;

    .checkmark {
        width: 40px;
        height: 40px;
        animation: checkmark 0.4s ease-in-out 0.2s forwards;
        opacity: 0;
        stroke-dasharray: 30;
        stroke-dashoffset: 30;
    }
}

.success-title {
    font-size: 24px;
    color: #333;
    margin: 0 0 12px;
}

.success-message {
    font-size: 16px;
    color: #666;
    margin: 0 0 32px;
}

.article-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 32px;
    text-align: left;

    .article-title {
        font-size: 18px;
        color: #333;
        margin: 0 0 12px;
    }

    .article-meta {
        font-size: 14px;
        color: #666;

        span {
            margin-right: 16px;

            &:last-child {
                margin-right: 0;
            }
        }
    }
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;

    .btn {
        padding: 10px 24px;
        border-radius: 6px;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.2s;

        &.view-btn {
            background: var(--primary-color);
            color: white;

            &:hover {
                background: darken(#3b82f6, 5%);
            }
        }

        &.home-btn {
            background: #f3f4f6;
            color: #374151;

            &:hover {
                background: #e5e7eb;
            }
        }

        &.create-btn {
            border: 1px solid var(--primary-color);
            color: var(--primary-color);

            &:hover {
                background: #f0f7ff;
            }
        }
    }
}

// 动画
@keyframes scale-up {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 30;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

// 响应式设计
@media (max-width: 640px) {
    .success-content {
        padding: 24px;
    }

    .action-buttons {
        flex-direction: column;
        
        .btn {
            width: 100%;
        }
    }
}
// 添加加载状态样式
.loading-state {
    text-align: center;
    padding: 40px 0;

    .loading-spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto 16px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

// 添加错误状态样式
.error-state {
    text-align: center;
    padding: 40px 0;
    color: #dc2626;

    .error-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    p {
        color: #666;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>